<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="description" content="同乡烩后台管理系统"/>
    <title>同乡烩后台管理系统</title>
    <link rel="stylesheet" th:href="@{css/reset.css}"/>
    <link rel="stylesheet" th:href="@{css/main.css}"/>
    <link rel="stylesheet" th:href="@{css/list.css}"/>

</head>
<!-- 原材料添加 -->
<body>
<!-- 固定 -->
<div class="main">
    <div th:replace="admin/admin-left::left"/>
    <div class="main-left"></div>

    <!--操作  -->
    <div class="main-right">
        <div class="main-right-header"></div>
        <div class="main-right-navs">
            <a href="#">管理首页</a><a class="split">/</a><a>原材料管理</a><a>/</a><a>原材料添加</a>
        </div>
        <div class="margin-right-container margin-right-container1">
            <div class="section  section2">
                <!--<div class="margin-right-container-nav margin-right-container-nav2 " style="height: 16rem">
                    <img id="imgPre" src="images/data02.jpg" />
                </div>-->
                <div class="margin-right-container-nav margin-right-container-nav2 margin-right-container-nav4">

                    <!--<div class="input-group">
                        <input onchange="preImg(this.id,'imgPre');" name="imgOne" id="imgOne" type="file" />
                    </div>-->
                    <form class="form" th:action="@{/addRaws}" method="post">
                        <div class="input-group">
                            <div class="input-group-left">原材料名称：</div>
                            <input class="input-group-right" type="text" name="name" placeholder="原材料名称" required/>
                            <div class="clear"></div>
                        </div>
                        <!--<div class="input-group">
                            <div class="input-group-left">分类</div>
                            <select class="input-group-right">
                                <option>肉类</option>
                                <option>蔬菜类</option>
                            </select>
                            <div class="clear"></div>
                        </div>-->
                        <div class="input-group">
                            <div class="input-group-left">价格：</div>
                            <input class="input-group-right" type="text" name="price" placeholder="价格" required/>
                            <div class="clear"></div>
                        </div>
                        <div class="input-group">
                            <div class="input-group-left">数量：</div>
                            <input class="input-group-right" type="text" name="num" placeholder="数量" required/>
                            <div class="clear"></div>
                        </div>
                        <div class="margin-right-container-nav5">
                            <button type="submit" class="sure">确认</button>
                        </div>
                    </form>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <!--<div class="margin-right-container">
            <div class="section section1">
                <div class="margin-right-container-nav">图片</div>
                <div class="margin-right-container-nav">原材料名称</div>

                <div class="margin-right-container-nav">价格</div>
                <div class="margin-right-container-nav">操作</div>
                <div class="clear"></div>
            </div>
            <div class="section  section2">
                <div class="margin-right-container-nav margin-right-container-nav2">
                    <img src="images/data02.jpg" />
                </div>
                <div class="margin-right-container-nav margin-right-container-nav2">${name}</div>
                <div class="margin-right-container-nav margin-right-container-nav2">${price}</div>
                <div class="margin-right-container-nav margin-right-container-nav2"><a id="change">修改</a>/<a
                        id="remove">删除</a></div>
                <div class="clear"></div>
            </div>
            <div class="section  section2">
                <div class="margin-right-container-nav margin-right-container-nav2">
                    <img src="images/data02.jpg" />
                </div>
                <div class="margin-right-container-nav margin-right-container-nav2">原材料名称</div>

                <div class="margin-right-container-nav margin-right-container-nav2">价格</div>
                <div class="margin-right-container-nav margin-right-container-nav2"><a>修改</a>/<a>删除</a></div>
                <div class="clear"></div>
            </div>

        </div>-->
    </div>
    <div class="clear"></div>
</div>
<script type="text/javascript" th:src="@{js/jquery-3.3.1.min.js}"></script>
<!--<script>
    function getFileUrl(sourceId) {
        var url;
        if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE
            url = document.getElementById(sourceId).value;
        } else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        } else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        }
        console.log(url)
        return url;
    }

    /**
     * 将本地图片 显示到浏览器上
     */
    function preImg(sourceId, targetId) {
        var url = getFileUrl(sourceId);
        var imgPre = document.getElementById(targetId);
        imgPre.src = url;
    }

    $(function () {
        var body_height = $(document).height();
        $(".main").css("height", body_height + "px");
    })
</script>-->
</body>
</html>
